import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Coins, ArrowLeft, Plus, Minus, Clock, Gift } from "lucide-react";
import { useUser } from "@/contexts/UserContext";

// 积分记录类型
interface CreditRecord {
  id: string;
  type: "earn" | "spend";
  amount: number;
  description: string;
  timestamp: Date;
}

const Credits = () => {
  const { user } = useUser();
  const navigate = useNavigate();

  // 模拟积分记录数据
  const [records] = useState<CreditRecord[]>([
    {
      id: "1",
      type: "earn",
      amount: 100,
      description: "新用户注册奖励",
      timestamp: new Date("2024-01-15T10:00:00"),
    },
    {
      id: "2",
      type: "spend",
      amount: -20,
      description: "视频脚本翻译",
      timestamp: new Date("2024-01-15T14:30:00"),
    },
    {
      id: "3",
      type: "spend",
      amount: -15,
      description: "视频摘要提炼",
      timestamp: new Date("2024-01-16T09:15:00"),
    },
    {
      id: "4",
      type: "earn",
      amount: 50,
      description: "邀请好友奖励",
      timestamp: new Date("2024-01-17T16:45:00"),
    },
    {
      id: "5",
      type: "spend",
      amount: -25,
      description: "智能脚本改写",
      timestamp: new Date("2024-01-18T11:20:00"),
    },
  ]);

  if (!user) {
    navigate("/login");
    return null;
  }

  // 积分消费规则
  const creditRules = [
    { service: "视频脚本翻译", cost: "20积分/次", icon: "🌐" },
    { service: "视频摘要提炼", cost: "15积分/次", icon: "📝" },
    { service: "智能脚本改写", cost: "25积分/次", icon: "✨" },
    { service: "批量处理", cost: "10积分/个", icon: "📦" },
  ];

  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat("zh-CN", {
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date);
  };

  return (
    <div className="min-h-screen bg-background">
      <div className="container max-w-4xl py-8 space-y-8">
        {/* 头部 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigate("/")}
              className="flex items-center gap-2"
            >
              <ArrowLeft className="h-4 w-4" />
              返回
            </Button>
            <div>
              <h1 className="text-2xl font-bold">我的积分</h1>
              <p className="text-muted-foreground">查看积分余额和使用记录</p>
            </div>
          </div>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          {/* 左侧：积分信息和规则 */}
          <div className="lg:col-span-1 space-y-6">
            {/* 积分余额 */}
            <Card className="shadow-[var(--shadow-card)] border-0 bg-[var(--gradient-primary)] text-primary-foreground">
              <CardHeader className="text-center">
                <div className="mx-auto w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
                  <Coins className="h-8 w-8" />
                </div>
                <CardTitle className="text-3xl font-bold">
                  {user.credits}
                </CardTitle>
                <CardDescription className="text-primary-foreground/80">
                  当前积分余额
                </CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <Button
                  variant="secondary"
                  className="w-full bg-white/20 hover:bg-white/30 text-primary-foreground border-0"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  充值积分
                </Button>
              </CardContent>
            </Card>

            {/* 积分规则 */}
            <Card className="shadow-[var(--shadow-card)] border-0">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Gift className="h-5 w-5 text-primary" />
                  消费规则
                </CardTitle>
                <CardDescription>各项功能的积分消费标准</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {creditRules.map((rule, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-3 bg-accent/50 rounded-lg"
                  >
                    <div className="flex items-center space-x-3">
                      <span className="text-lg">{rule.icon}</span>
                      <span className="font-medium">{rule.service}</span>
                    </div>
                    <Badge
                      variant="outline"
                      className="text-primary border-primary/30"
                    >
                      {rule.cost}
                    </Badge>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>

          {/* 右侧：积分记录 */}
          <div className="lg:col-span-2">
            <Card className="shadow-[var(--shadow-card)] border-0">
              <CardHeader className="bg-[var(--gradient-secondary)] rounded-t-lg">
                <CardTitle className="flex items-center gap-2">
                  <Clock className="h-5 w-5 text-primary" />
                  积分记录
                </CardTitle>
                <CardDescription>最近的积分收支明细</CardDescription>
              </CardHeader>
              <CardContent className="p-0">
                <div className="divide-y divide-border/50">
                  {records.map((record) => (
                    <div
                      key={record.id}
                      className="p-6 hover:bg-accent/30 transition-[var(--transition-fast)]"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                          <div
                            className={`w-10 h-10 rounded-full flex items-center justify-center ${
                              record.type === "earn"
                                ? "bg-success/20 text-success"
                                : "bg-destructive/20 text-destructive"
                            }`}
                          >
                            {record.type === "earn" ? (
                              <Plus className="h-5 w-5" />
                            ) : (
                              <Minus className="h-5 w-5" />
                            )}
                          </div>
                          <div>
                            <p className="font-medium">{record.description}</p>
                            <p className="text-sm text-muted-foreground">
                              {formatDate(record.timestamp)}
                            </p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p
                            className={`text-lg font-bold ${
                              record.type === "earn"
                                ? "text-success"
                                : "text-destructive"
                            }`}
                          >
                            {record.type === "earn" ? "+" : ""}
                            {record.amount}
                          </p>
                          <p className="text-sm text-muted-foreground">积分</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                {records.length === 0 && (
                  <div className="p-12 text-center text-muted-foreground">
                    <Coins className="h-12 w-12 mx-auto mb-4 opacity-50" />
                    <p>暂无积分记录</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Credits;
